<template>
	<view class="content" >
		<!-- Header -->
		<Header @searchProject="searchProject" :show="true"></Header>
		<!-- 主页公告 -->
		<!-- <Note></Note> -->
		<!-- banner -->
		<Banner></Banner>
		<view class="project-content" style="padding-bottom: 90px">
			<view class="project-search">
				<view class="project-content-title">
					<view class="">
						项目大厅
					</view>
					<view class="header-right-search">
						<view class="header-right-search-inner">
							<input v-model="search_text" type="text" class="header-search"
								placeholder-class="header-search-input" placeholder="搜索项目名称或者编号"
								@confirm="searchProject(search_text)">
						</view>
						<image src="@/static/images/index/search-icon.png" mode="widthFix" class="search-icon-img"
							@click="searchProject(search_text)" />
					</view>
					<scroll-view class="project-nav-btn project-nav-btn-pc" :scroll-left="scrollLeftVal" :enable-flex="true" :scroll-x="true" 
						:scroll-with-animation="true" @scroll="scroll">
						<view class="nav-btn" :class="{'active-cate': item.category === currentCategory}"
							v-for="(item, i) in categoryList" :key="i" @click="changeCate(item.category, i)">
							{{item.category}}
						</view>
					</scroll-view>
					<!-- <div class="project-nav-btn project-nav-btn-pc" >
						<view class="nav-btn" :class="{'active-cate': item.category === currentCategory}"
							v-for="(item, i) in categoryList" :key="i" @click="changeCate(item.category, i)">
							{{item.category}}
						</view>
					</div> -->
				</view>
			</view>
			<scroll-view class="project-nav-btn project-nav-btn-app"
			
				:scroll-left="scrollLeftVal" :scroll-x="true"
				:scroll-with-animation="true" @scroll="scroll">
				<view class="nav-btn" :class="{'active-cate': item.category === currentCategory}"
					v-for="(item, i) in categoryList" :key="i" @click="changeCate(item.category, i)">
					{{item.category}}
				</view>
			</scroll-view>
			<view v-if="projectList.length === 0 && isShow" class="project-no-data">
				<view class="project-no-data-inner" style="margin-top: 45px;">
					<image src="@/static/images/projectDetail/no-data.png" mode="widthFix" class="no-data-img">
					</image>
					<view class="project-no-data-txt">暂无项目数据</view>
				</view>
			</view>
			<view v-if="projectList.length > 0" class="project-list">
				<view class="project-list-li" v-for="(item, i) in projectList" :key="i" @click="goProjectDetail(item)">
					<view class="project-li-inner">
						<view class="project-cover posr">
							
							<view class="posa flex-between-nowrap project-li-title-posa" style="z-index: 999;">
								<view class="project-li-title-posa-left">项目ID：{{item.project_id}}</view>
								<!-- -->
								<u-badge  type="error" :value="item.unreadMessageCount"  v-if="item.unreadMessageCount > 0"></u-badge>
							</view>
							<image v-if="item.cover" :src="item.cover" mode="aspectFill" class="project-cover-img" />
							<text v-else class="project-cover-no-img">暂无封面图</text>
						</view>
						<view class="project-tags">
							<view v-if="item.user_status" class="project-li-icon-left">已开通</view>
							<view v-else class="project-li-icon-left project-li-icon-disabled">未开通</view>
							<view class="project-li-icon-right">{{item.category}}</view>
						</view>
						<view class="project-li-title">
							<view class="project-li-title-name">
								名称：{{item.title}}
							</view>
							<view class="project-li-title-id">
								单价：{{item.project_price || '暂无'}}
								<!-- 项目ID：{{item.project_id}} -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 分页器 -->
			<page-pagination v-if="page.total > 1"  @change="currentChange" :total="page.total" :pageSize="page.page_size"  :showAround="true"></page-pagination>
			<!-- <Pager class="home-pager" v-if="pageNumList > 0" :page="page" :pageNumList="pageNumList" @currentChange="currentChange"></Pager> -->
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	import Banner from "@/components/Banner/Banner.vue"
	import Header from "@/components/Header/Header.vue"
	import Note from "@/components/Note/Note.vue"
	import Pager from "@/components/Pager/Pager.vue"
	import {
		getProjectList,
		getProjectCategory
	} from "@/common/api/project.js"
	import {
		Base64
	} from "@/js_sdk/js-base64/base64.js"
	export default {
		data() {
			return {
				title: '',
				page:{
					page: 1,
					page_size: 8,
				},
				// page: 1,
				// page_size: 8,
				search_text: '',
				projectList: [],
				categoryList: [],
				currentCategory: '全部',
				pageNumList: 0, // 分页数
				isMobile: false,
				scrollLeftVal: 0,
				old: {
					scrollLeftVal: 0
				},
				currentIndex: 0,
				isShow: false,
			}
		},
		watch:{
			'page.page'(val){
			}
		},
		mounted() {
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title:'宅小职工作台'
			})
		},
		created() {
			if (navigator.userAgent.indexOf('Mobile') === -1) {
				this.isMobile = false
				this.page.page_size = 8
			} else {
				this.isMobile = true
				this.page.page_size = 8 // 移动端本来显示4
			}
			this.getProjectCategoryFun()
			this.getProjectListFun()
		},
		methods: {
			
			scroll(e) {
				this.old.scrollLeftVal = e.detail.scrollLeft
			},
			scrollClassifyMenu() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.nav-btn')
					.boundingClientRect(data => {
						console.log(data)
							setTimeout(() => {
								// 解决view层不同步的问题
								this.scrollLeftVal = this.old.scrollLeftVal
								this.$nextTick(() => {
									this.scrollLeftVal = this.currentIndex * data.width + 10;
									console.log(this.scrollLeftVal)
									this.$forceUpdate()
								});
							});
					})
					.exec();
			},
			// 项目分类
			getProjectCategoryFun() {
				getProjectCategory().then(res => {
					if (res.code === 200) {
						let data = res.data
						this.categoryList = data
						this.categoryList.unshift({
							category: '全部'
						})
					}
				})
			},
			// 分类切换
			changeCate(val, index) {
				uni.showLoading({
					title: '加载中'
				});
				this.currentCategory = val
				this.currentIndex = index
				// this.search_text = ''
				this.page.page = 1
				// this.scrollClassifyMenu()
				this.getProjectListFun()
			},
			// 跳转项目详情
			goProjectDetail(item) {
				if (item.user_status) {
					let projectData = {
						project_id: item.project_id,
						id: item.id,
						title: item.title
					}
					// projectData = Base64.encode(JSON.stringify(projectData))
					let projectDetail = JSON.stringify(projectData)
					uni.setStorageSync('projectDetail', projectDetail)
					uni.navigateTo({
						url: `/pages/projectDetail/projectDetail?project_id=${projectData.project_id}&id=${projectData.id}`,
						query:projectData
					})
				} else {
					uni.showToast({
						title: '对不起，该项目您未开通权限。',
						icon: 'none',
						duration: 1500
					})
				}
			},
			// 查询项目大厅列表
			searchProject(search_text) {
				uni.showLoading({
					title: '加载中'
				});
				this.search_text = search_text
				this.currentCategory = '全部'
				this.page.page = 1
				// 解决view层不同步的问题
				this.scrollLeftVal = this.old.scrollLeftVal
				this.$nextTick(() => {
					this.scrollLeftVal = 0
					this.$forceUpdate()
				});
				this.getProjectListFun()
			},
			// 获取项目大厅列表
			getProjectListFun() {
				this.isShow = false
				
				let data = {
					page: this.page.page,
					page_size: this.page.page_size,
					search_text: this.search_text,
					category: this.currentCategory === '全部' ? '' : this.currentCategory
				}
				getProjectList(data).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						let datas = res.data
						this.projectList = datas.list
						this.page.total = datas.count
						// this.pageNumList = Math.ceil(data.count / this.page_size)
						if (this.projectList.length === 0){
							this.isShow = true
						} else {
							this.isShow = false
						}
					}
				})
			},
			// 分页
			currentChange(val) {
				uni.showLoading({
					title: '加载中'
				});
				this.page.page = val
				this.getProjectListFun()
			}
		}
	}
</script>

<style lang="scss">
	// 大厅项目内容
	.project-content {
		// padding: 0 132px;
		box-sizing: border-box;
		width: $baseWidth;
		margin: 0 auto;
		margin-top: 64px;

		.project-search {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.project-content-title {
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #32353A;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.header-right-search {
					// margin-right: 25px;
					position: relative;
					width: 240px;
					display: none;

					.search-icon-img {
						position: absolute !important;
						width: 20px;
						height: 20px;
						right: 12px;
						top: 8px;
						cursor: pointer;
					}

					.header-search {
						width: 240px;
						height: 36px;
						background: #F0F2F5;
						border-radius: 4px;
						padding: 8px 12px;
						box-sizing: border-box;
					}

					.header-search-input {
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #979EAA;
					}
				}
			}
		}
		
		.project-nav-btn-pc{
			display: block;
			width: calc(100% - 110px) !important;
			@extend .show-scrollbar;
			text-align: right !important;
			margin-top: 0!important;
			.nav-btn{
				margin-left: 10px !important;
				margin-right: 0 !important;
				cursor: pointer;
			}
			
		}
		.project-nav-btn-app{
			display: none;
		}
		// 分类按钮
		.project-nav-btn {
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			overflow-x: auto;
			text-align: left;
			margin-top: 10px;

			.nav-btn {
				background: #ffffff;
				border-radius: 50px;
				font-size: 16px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #2D3036;
				padding: 0 16px;
				line-height: 30px;
				height: 30px;
				display: inline-block;
				margin-right: 40px;
			}

			.active-cate {
				background: #26bbff;
				color: #FFFFFF;
			}
		}

		.project-list {
			padding: 20px 0;
			padding-bottom: 0;
			// display:flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			width: 100%;
			min-height: 670px;
			box-sizing: border-box;

			.project-list-li {
				width: 276px;
				cursor: pointer;

				&:nth-child(4n) {
					margin-right: 0;
				}

				&:active {
					opacity: 0.8;
				}

				display: inline-block;
				// width: calc(25% - 24px);
				margin-bottom: 48px;
				margin-right: 24px;
				box-sizing: border-box;

				.project-li-inner {
					width: 100%;
					margin: 0 auto;
					position: relative;

					.project-cover {
						width: 276px;
						height: 168px;
						overflow: hidden;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						.project-cover-no-img{
							width: 100%;
							height: 100%;
							color: #ccc;
							background: #F0F2F5;
							font-size: 14px;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.project-cover-img {
							width: 276px;
							height: 168px;
						}
					}

					.project-tags {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 12px;

						.project-li-icon-left {
							width: 52px;
							height: 24px;
							background: rgba(23, 182, 255, 0.2);
							border-radius: 1px;
							padding: 4px 8px;
							font-size: 12px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #26bbff;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.project-li-icon-disabled {
							color: #646A74;
							background: #E7EAEF;
						}

						.project-li-icon-right {
							min-width: 52px;
							background-color: #fff;
							max-width: 50%;
							height: 24px;
							line-height: 24px;
							border-radius: 1px;
							border: 1px solid #E7EAEF;
							padding: 4px 8px;
							font-size: 12px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #646870;
							// display: flex;
							// align-items: center;
							text-align: center;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}

					.project-li-title {
						.project-li-title-name {
							font-size: 18px;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #2D3036;
							margin-top: 12px;
							width: 100%;
							box-sizing: border-box;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}

						.project-li-title-id {
							font-size: 14px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #979EAA;
							margin-top: 6px;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
						
					}

				}
			}
		}
	}
	
	.project-li-title-posa{
		z-index: 999;
		bottom: auto;
		font-size: 14px;
		
		&-left{
			background: #26bbff;
			height: auto;
			color: #fff;
			padding: 0px 4px;
			border-radius: 4px;
			height: 25px;
			line-height: 25px;
		}
		/deep/.u-badge--not-dot{
			padding: 0;
			width: 25px;
			height: 25px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	@media screen and (min-width: 0px) and (max-width:1024px) {
		.project-li-title-posa{
			&-left{
				font-size: 12px;
			}
		}
		.home-pager{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			background-color: #fff;
			padding: 10px 0 10px 0;
		}
		.project-content {
			padding: 0 20px;
			width: 100%;
			box-sizing: border-box;
			margin-top: 20px;

			.project-search {
				flex-direction: column;

				.project-content-title {
					width: 100%;
					font-size: 18px;
					margin-bottom: 0;

					.header-right-search {
						position: relative;
						width: 175px;
						box-sizing: border-box;
						display: inline-block;
						.search-icon-img {
							position: absolute !important;
							width: 20px;
							height: 20px;
							right: 6px;
							top: calc(50% - 10px);
							cursor: pointer;
						}

						.header-search {
							width: 100%;
							height: 30px;
							padding: 4px 8px;
						}

						.header-search-input {
							font-size: 12px;
						}
					}
				}
			}

			.project-nav-btn-pc{
				display: none;
			}
			.project-nav-btn-app{
				display: block;
			}
			.project-nav-btn {
				width: 100%;
				text-align: left;

				.nav-btn {
					font-size: 12px;
					margin-right: 16px;
					margin-left: 0;
				}
			}

			.project-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding-bottom: 43px;
				min-height: auto;

				.project-list-li {
					// width: 161px;
					width: calc(50% - 6px);
					margin-bottom: 16px;
					margin-right: 0;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.project-li-inner {
						width: 100%;

						.project-cover {
							width: 100%;
							height: 98px;
							overflow: hidden;
							border-radius: 4px;

							.project-cover-img {
								width: 100%;
								height: 98px;
								min-height: 98px;
							}
						}
					}

					.project-tags {
						margin-top: 8px !important;

						.project-li-icon-left {
							width: 38px !important;
							min-width: auto !important;
							height: 18px !important;
							// background: rgba(23, 182, 255, 0.2) !important;
							border-radius: 1px !important;
							overflow: hidden;
						}

						.project-li-icon-right {
							height: 18px !important;
							line-height: 18px !important;
							border-radius: 1px !important;
							// padding: 4px 8px;
							max-width: 45% !important;
							min-width: 38px !important;
							overflow: hidden;
						}
					}

					.project-li-title {
						margin-top: 8px;

						.project-li-title-name {
							font-size: 16px !important;
						}

						.project-li-title-id {
							margin-top: 4px;
							// font-size: 12px !important;
						}
					}
				}
			}
		}
	}
</style>
